<template>
	<div class="flex-start-center">
		<div class="total-count-box">
			<div v-for="(value, key) in filteredTotalData" :key="key" class="total-item">
				<span class="total-count">{{ value || 0 }}</span>
				<span class="total-item-label">{{ labelMapping[key] || '未知' }}</span>
			</div>
		</div>
	</div>
</template>

<script>
    export default {
        props: {
            totalData: {
                type: Object,
                default() {
                    return {};
                }
            },
            isFull: {
                type: Boolean,
                default: false
            }
        },
        computed: {
            filteredTotalData() {
                const { allSaleQty, ...filteredData } = this.totalData;
                return filteredData;
            }
        },
        data() {
            return {
                labelMapping: {
                    // allSaleQty: '总销售数量(吨)',
                    inputQty: '总入库数量(吨)',
                    outputQty: '总已发货数量(吨)',
                    inventoryQty: '总库存数量(吨)'
                }
            };
        }
    };
</script>

<style lang="scss" scoped>
.total-count-box {
    height: 60px;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;

    .total-item {
        width: 150px;
        height: 100%;
        margin: 0 4px;
        border: solid 1px #dcdee2;
        box-shadow: 0 0 2px 1px #eee;
        border-radius: 6px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: #fff;

        .total-item-label {
            color: #808695;
            font-size: 14px;
        }

        .total-count {
            color: #515a6e;
            font-weight: 500;
            margin-left: 4px;
            font-size: 20px;
        }
    }

    .total-item:hover {
        border-color: #2d8cf0;
        box-shadow: 0 0 2px 1px #2d8cf0;
        transition: all 0.5s;
        cursor: pointer;
    }
}
</style>
